<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>layui图片放大功能</title>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>

    <body>



        <div> 点击这个图片放大</div>

        <img id="imgMerchant" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2640081158,1878316484&fm=26&gp=0.jpg"
            width="100px" height="100px" />
      <hr>
        <br>
        <br>
        <img id="" class="test" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2640081158,1878316484&fm=26&gp=0.jpg"
            width="100px" height="100px" />
        <br>

        <br>
        <img id="" class="test" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2640081158,1878316484&fm=26&gp=0.jpg"
            width="100px" height="100px" />

        <br>

      <hr>
        <div>点击下列图片轮播相册</div>


        <div class="img-list">


            <img class="" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2640081158,1878316484&fm=26&gp=0.jpg"
                width="100px" height="100px" />

            <img class="" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2640081158,1878316484&fm=26&gp=0.jpg"
                width="100px" height="100px" />

        </div>

        <br>

        <div>图片划过浮动</div>


        <table>
            <tr>
                <td>
                    <img id="syb" src="https://allinpaycommon.oss-cn-hangzhou.aliyuncs.com/merchant-logo/common/logo.jpg"
                        width="100px" height="100px" />
                </td>
            </tr>
        </table>



        <input type="button" value="click me" id="btn1" onclick="f()">

        <script>
            var $;
            /* 预先加载模块 layui.js 的两个底层方法之一 */
            layui.use(['form', 'element', 'layer'], function() {
                var form = layui.form;
                var element = layui.element;
                var layer = layui.layer;
                $ = layui.jquery;

                var img_show = null; // tips提示
                $('td img').hover(function() {
                    var kd = $(this).width();
                    kd1 = kd * 2; //图片放大倍数
                    kd2 = kd * 2 + 30; //图片放大倍数
                    var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:" +
                        kd1 + "px;' />";

                    //console.log($(this).attr('src'));

                    img_show = layer.tips(img, this, {
                        tips: [2, 'rgba(41,41,41,.5)'],
                        area: [kd2 + 'px']
                    });
                    console.log(img_show);
                }, function() {
                    layer.close(img_show);
                });

            });


            $("#imgMerchant").click(function() {
                console.log("点击弹出图片");
                let url = $("#imgMerchant").attr("src");
                var height = $("#imgMerchant").height() * 5; //拿的图片原来宽高，建议自定义宽高
                var width = $("#imgMerchant").width() * 5;
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    shadeClose: true,
                    area: [width + 'px', height + 'px'], //宽高
                    content: "<img src=" + url + " />"
                });
            });

            $(".test").each( function(i){

                $(this).click( function() {

                    console.log("点击弹出图片");
                    let url = $(this).attr("src");
                    var height = $(this).height() * 5; //拿的图片原来宽高，建议自定义宽高
                    var width = $(this).width() * 5;
                    layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 0,
                        shadeClose: true,
                        area: [width + 'px', height + 'px'], //宽高
                        content: "<img src=" + url + " />"
                    });
                })
            });

            //查看图片
            /*    $("img").on('click', function() {
                    // alert(0); 点击进来了;
                    console.log($(this).attr("src"));
                    var src = $(this).attr("src");
                    if (isEmpty(src)) return false;
                    layer.photos({
                        photos: $(this).parent(),
                        //这个找父容器, 父容器有多少个图片节点, 那么就可以轮播多少个;
                        shadeClose: false,
                        closeBtn: 2,
                        anim: 0
                    });
                }); */


            function isEmpty(obj) {
                if (obj == null || obj == undefined || obj == "") {
                    return true;
                } else {
                    return false;
                }
            }

            function f() {

                let show_tip = layer.tips(
                    '<img src="https://allinpaycommon.oss-cn-hangzhou.aliyuncs.com/merchant-logo/common/logo.jpg" width="20px" height="30px"/>',
                    '#btn1', {
                        tips: [3, 'rgba(41,41,41,.5)'],
                        area: ["50 px", "40 px"],
                        time: 1000
                    });


            }
        </script>
    </body>

</html>




<!--
layer.tips(content, follow, options) - tips层
{
content:tooltip内容可以是str，也可以是html代码
follow:依附的元素，一般用id表示
如果依附的元素是自己直接用this即可，如果是在其他元素的事件（比如点击）里面，记得更改this指向。
options:tips的配置型[tips位置：1上；2右；3下；4左,字体的颜色]
}
这3个是必填参数，也同时具有layer的其他基础参数，比如time（是否定时关闭），area（设置框的宽高），shadeClose（是否点击遮罩层关闭）等。

 -->
